<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="60%"
            append-to-body
            top="50px"
            :close-on-click-modal="false"
            custom-class="dialogUpgrade"
            :before-close="closes"
        >
            <div class="table">
                <el-table
                    :data="tableData"
                    header-cell-class-name="table_title"
                    :header-cell-style="{ color: '#fff', textAlign: 'center' }"
                    :row-class-name="tabRowClassName"
                    style="width: 100%"
                    max-height="600"
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0,0,0,0.1)"
                >
                    <el-table-column
                        prop="upgradeCode"
                        label="申请编码"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="areaName"
                        label="省份名称"
                        width="180px"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="是否已完成升级"
                        width="120"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0"> 未升级 </span>
                            <span v-else-if="scope.row.status == 1">
                                升级中
                            </span>
                            <span v-else-if="scope.row.status == 2">
                                已升级
                            </span>
                            <span v-else-if="scope.row.status == 3">
                                升级异常
                            </span>
                            <span v-else> 暂无 </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="databaseType"
                        label="数据库"
                        width="80px"
                    >
                    </el-table-column>
                        
                    <el-table-column prop="createTime" width="150" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="upgradeEndTime" width="150" label="升级完成时间">
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="80px">
                        <template slot-scope="scope">
                            <div class="operation_box">
                                <el-button
                                    v-if="rowData.status == 2"
                                    type="primary"
                                    size="mini"
                                    @click="upgrade(scope.row)"
                                    >升级</el-button
                                >
                            </div>
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    type="primary"
                    @click="submitForm('ruleForm')"
                    >确 定</el-button
                >
                <el-button size="small" @click="closes">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { upgradeRecordList, upgradePro} from '@/api/task'
import { MessageBox } from 'element-ui'
export default {
    name: 'upgradeDialog',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        rowData: {
            type: Object,
            default: () => {}
        },
        title: {
            type: String,
            default: ''
        }
    },
    mounted() {
        this.getList()
    },
    data() {
        return {
            tableData: [],
            loading: false,
            formItem: {
                pageNu: 1, //页码值
                pageSi: 10 //页面大小
            }
        }
    },
    methods: {
        closes() {
            this.$emit('close')
        },
        upgrade(row) {
            MessageBox.confirm(`是否升级当前${row.areaName}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                upgradePro({
                    upgradeCode: row.upgradeCode,
                    areaCode: row.areaCode
                }).then(res => {
                    if (res.code == 200) {
                        this.$Message({
                            text: res.msg,
                            type: 'success'
                        })
                        this.getList()
                    }
                })
            })
        },
        getList() {
            this.loading = true
            upgradeRecordList({
                upgradeCode: this.rowData.upgradeCode, //升级编号
                ...this.formItem
            }).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableData = res.rows
                }
            })
        },
        tabRowClassName(row) {
            if (row.rowIndex % 2 == 0) {
                return 'row1'
            } else {
                return 'row2'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.dialogUpgrade {
}
</style>
